// 渲染的每一项houseitem项目
import React from 'react'
import PropTypes from 'prop-types'
import { bUrl } from '../../utils/url'
import styles from './index.module.css'

function HouseItem({ src, title, desc, tags, price, onClick ,style, houseImg}) {
 return (
  <div className={styles.house} key={title} onClick={onClick} style={style}>
  {/* 左边图片 */}
  <div className={styles.imgWrap}>
      <img className={styles.img} src={bUrl + (src ? src : houseImg)} alt="" />
  </div>
  {/* 右边内容 */}
  <div className={styles.content}>
      <h3 className={styles.title}>{title}</h3>
      <div className={styles.desc}>{desc}</div>
      <div>
          {      /* tag标签 遍历渲染*/   }
          {/* ['近地铁', '随时看房'] */}
          {tags? tags.map((tag, index) => {
              // 每一tag都是一个样式
              // 想让我遍历出来的每个tag样式都不一样,那就只能用++ 和属性选择器了
              // tagClass 是一个字符串
              const tagClass = 'tag' + (index + 1)
              return (
                  <span
                      className={[ styles.tag, styles[tagClass] ].join(' ')}
                      key={tag}
                  >
                      {tag}
                  </span>
              )
          }): ''}
      </div>
      <div className={styles.price}>
          <span className={styles.priceNum}>{price}</span> 元/月
</div>
  </div>
</div>
 )
}
HouseItem.propTypes = { // 参数校验规则
  src: PropTypes.string,
  title: PropTypes.string,
  desc: PropTypes.string,
  tags: PropTypes.array.isRequired,
  price: PropTypes.number,
  onClick: PropTypes.func
}

export default HouseItem